<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/1/25 0025
  Time: 下午 04:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
        <div id="site">
            <select name="province" id="province">
                <option value="volvo">请选择省份</option>
            </select>
            <select name="city" id="city">
                <option value="volvo">请选择城市</option>
            </select>
            <select name="area" id="area">
                <option value="volvo">请选择区县</option>
            </select>
        </div>
<script>
    $(function () {
        var $sit=$("#site")

         $.ajax({
                url:"province",
                dataType: "json",
                success: function(data)  {
                    // 发送成功后执行的代码
                    var str = "";
                    $.each(data, function (index, n) {
                        var text="<option value='"+data[index].codeP+"'>"+data[index].name+"</option>"
                        str=str+text
                    })
                    $("#province").find("option").after(str)
                },
                error: function() {
                    // 请求失败执行的代码
                    alert("获取失败")
                }
            })

        $("#province").on("change",function () {
            var codep=$(this).val()
            $.ajax({
                url:"city?codeP="+codep,
                type:"get",
                dataType: "json",
                success: function(data)  {
                    // 发送成功后执行的代码
                    var str = "";
                    if(data[0].codeP == codep){
                        $.each(data, function (index, n) {
                            var text="<option value='"+data[index].codeC+"'>"+data[index].name+"</option>"
                            str=str+text
                        })

                        $("#city").replaceWith("<select name='city1' id='city'><option value='volvo'>请选择城市</option>"+str+"</select>")
                    }

                },
                error: function() {
                    // 请求失败执行的代码
                    alert("获取失败")
                }
            })


        })

        $(document).ajaxStop(function(){
            $("#city").on("change",function () {

                var codec=$(this).val()

                $.ajax({
                    url:"area?codeC="+codec,
                    type:"get",
                    dataType: "json",
                    success: function(data)  {
                        // 发送成功后执行的代码
                        var str = "";
                        if (data[0].codeC==codec){
                            $.each(data, function (index, n) {
                                var text="<option value='"+data[index].codeC+"'>"+data[index].name+"</option>"
                                str=str+text
                            })
                            $("#area").replaceWith("<select name='area' id='area'><option value='volvo'>请选择区县</option>"+str+"</select>")
                        }
                    },
                    error: function() {
                        // 请求失败执行的代码
                        alert("获取失败")
                    }
                })

            })

        })

    })
</script>
</body>
</html>
